<template>
  <div class="orderconfirm-page">
    <div class="orderconfirm-contain">
      <div class="orderconfirm-top">
        <van-nav-bar title="订单确认" right-text="" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="orderconfirm-content" ref="orderconfirm_page">
        <div class="orderconfirm">
          <div class="address" @click="chooseAddress()">
            <div class="address-flex" v-show="isAddressSelected">
              <div class="tacitly">
                <img class="tacitly-img" src="//static-as.missfresh.cn/frontend/img/address-red.png">
                <span class="tacitly-address">地址</span>
              </div>
              <div class="address-content">
                <h2 class="address-name">
                  <span>{{addressInfo.name}}</span>
                  <span class="iphone">{{addressInfo.tel}}</span>
                </h2>
                <p class="addres-id">
                  <span class="receiving">{{addressInfo.address}}</span>
                </p>
              </div>
            </div>
            <div class="no-address" v-show="!isAddressSelected">您还未选择收货地址</div>
          </div>
          <div class="products-list">
            <div class="title">
              <div class="txt">
                <span>商品列表</span>
              </div>
            </div>
            <div class="list-box" @click.stop.prevent="jumpConfirmList()">
              <div class="img-group">
                <div class="img-item" v-for="(item,index) in goodsList" :key="index">
                  <img :src="item.thumb" alt="">
                </div>
              </div>
              <div class="list-num" @click.stop.prevent="jumpConfirmList()">
                <span>共{{confirmInfo.quantity}}件</span>
              </div>
            </div>
          </div>
          <div class="price-list-panel">
            <div class="list item-have-arrow item-board">
              <div class="list-totalPrice">
                <span class="item-content item-content-totalPrice">商品总价</span>
                <div class="item-price item-price-totalPrice" style="color: rgb(38, 38, 38);">
                  <div class="item-price-total">￥{{confirmInfo.money}}</div>
                </div>
              </div>
            </div>
            <div class="list item-have-arrow item-board">
              <div class="list-totalPrice">
                <span class="item-content">运费</span>
                <span class="item-price" style="color: rgb(38, 38, 38);">
                  <span class="rmb" v-show="!isfreeship">￥{{confirmInfo.youfei}}</span>
                  <span v-show="isfreeship">免邮</span>
                </span>
              </div>
            </div>
            <div class="info-details">
              <span class="item-totalPrice-title" style="color: rgb(38, 38, 38);">合计</span>
              <span style="color: rgb(255, 72, 145);">¥{{confirmInfo.total}}</span>
            </div>
          </div>
          <div class="payment-box">
            <div class="pay-line">
              <div class="txt">
                <span>支付方式</span>
              </div>
            </div>
            <div class="payment newPay">
              <div class="item payment-item item-icon-left" @click.stop.provent="choosePayment(payment,'wxpay')">
                <div class="radio-item" :class="{'payment-active':payment.wxpay}">
                  <div class="icon-wxpay zhifu">
                    <div class="checkbox-wrapper">
                    </div>
                  </div>
                  <div class="txt">微信支付</div>
                </div>
              </div>
              <div class="item payment-item item-icon-left" @click.stop.provent="choosePayment(payment,'alipay')">
                <div class="radio-item" :class="{'payment-active':payment.alipay}">
                  <div class="icon-alipay zhifu">
                    <div class="checkbox-wrapper">
                    </div>
                  </div>
                  <div class="txt">支付宝</div>
                </div>
              </div>
            </div>
          </div>
          <div class="transparent-bg"></div>
        </div>
      </div>
    </div>
    <div class="settlement-footer bar-light">
      <div class="fot-price-num price-left">
        <span class="fot-price order-price fot-padding buying-fot">
          <span class="foot-price-txt" style="color: rgb(38, 38, 38);">付款</span>
          <span class="foot-price-num" style="color: rgb(255, 72, 145);">¥{{confirmInfo.total}}</span>
        </span>
      </div>
      <div class="goes jie disable-user-behavior" @click="toPay">去支付</div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import store from '@/store/store'
import { mapState, mapMutations, mapActions } from 'vuex'
import Vue from 'vue'
import { NavBar, Icon, Dialog, Toast } from 'vant'
import { CODE, APIURI } from '#/common/js/apiConst'
Vue.use(NavBar).use(Icon)
export default {
  store,
  data() {
    return {
      addressInfo: {},
      isAddressSelected: false,
      isfreeship: true,
      payment: {
        wxpay: true,
        alipay: false
      },
      goodsList: [],
      confirmInfo: {},
      notChooseList: [],
      payway: 'wxpay'
    }
  },
  created() {
    this.$nextTick(() => {
      this.getAddressInfo()
      this.getOrderGoods()
      this._initScroll()
    })
  },
  computed: {
    ...mapState(['address'])
  },
  methods: {
    ...mapMutations(['setGoods']),
    ...mapActions(['setsubCount']),
    _initScroll() {
      if (!this.ordersScroll) {
        this.ordersScroll = new BScroll(this.$refs.orderconfirm_page, {
          probeType: 3,
          scrollY: true,
          click: true
        })
      } else {
        this.ordersScroll.refresh()
      }
    },
    onClickLeft() {
      Dialog.confirm({
        title: '订单确认',
        message: '确定离开提交订单页面？'
      })
        .then(() => {
          // on confirm
          this.$router.push({
            path: '/shopcar'
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    choosePayment(payment, way) {
      payment.wxpay = false
      payment.alipay = false
      payment[way] = true
      this.payway = way
    },
    jumpConfirmList() {
      this.$router.push({
        path: '/ordergoodslist'
      })
    },
    chooseAddress() {
      this.$router.push({
        path: '/user/addresslist?source=orderconfirm'
      })
    },
    getAddressInfo() {
      if (
        localStorage.state &&
        Boolean(Object.keys(JSON.parse(localStorage.state).address).length)
      ) {
        this.isAddressSelected = true
        this.addressInfo = JSON.parse(localStorage.state).address
      } else {
        this.isAddressSelected = false
      }
    },
    getOrderGoods() {
      let goodsList = []
      this.$axios
        .get(APIURI + '/cart')
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            this.confirmInfo = res.data
            goodsList = res.data.list.filter(el => {
              return el.choose
            })
            this.notChooseList = res.data.list.filter(el => {
              return !el.choose
            })
            // console.log(this.notChooseList)
            this.goodsList = goodsList
            // if (this.goodsList.length === 1) {
            //   this.confirmInfo.quantity = this.goodsList[0].quantity
            // } else {
            // this.confirmInfo.quantity = this.goodsList.reduce(
            //   (prev, next) => {
            //     if (prev.quantity) {
            //       return prev.quantity + next.quantity
            //     } else {
            //       return prev + next.quantity
            //     }
            //   }
            // )
            this.confirmInfo.quantity = 0
            for (let i = 0; i < this.goodsList.length; i++) {
              this.confirmInfo.quantity += this.goodsList[i].quantity
            }

            // }
          }
        })
        .catch(function(err) {
          console.log(err)
        })
    },
    toPay() {
      if (this.addressInfo.id) {
        this.$axios
          .get(APIURI + '/order/add/' + this.addressInfo.id)
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              Toast('提交成功')
              // console.log(this.notChooseList)
              this.setGoods({})
              if (this.notChooseList.length) {
                for (let i = 0; i < this.notChooseList.length; i++) {
                  this.setGoods(this.notChooseList[i])
                }
                // this.getCarCount()
              } else {
                this.setGoods({})
              }
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      } else {
        Toast('请选择收货地址')
      }
    }
    // getCarCount() {
    //   let goodInfo = []
    //   this.$axios
    //     .get(APIURI + '/cart')
    //     .then(res => {
    //       res = res.data
    //       if (res.code === CODE) {
    //         console.log(res.data)
    //         console.log(this.good)
    //         if (res.data) {
    //           console.log(this.good)
    //           this.good.quantity = 0
    //           goodInfo = res.data.list.filter(el => {
    //             return el.id === Number(this.good.id)
    //           })
    //           console.log(goodInfo)
    //           // if (goodInfo.length) {
    //           //   let quantity = 0
    //           //   for (let i = 0; i < goodInfo.length; i++) {
    //           //     this.good.quantity = goodInfo[i].quantity
    //           //     quantity += goodInfo[i].quantity
    //           //   }
    //           //   this.setsubCount(quantity)
    //           // }
    //         }
    //       }
    //     })
    //     .catch(function(err) {
    //       console.log(err)
    //     })
    // }
  },
  watch: {
    address: 'getAddressInfo'
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
@import './orderConfirm.scss';
</style>